<template>
	<view class="findCaseDetails">
		<view class="cover">
			<!-- <image src="@/static/home/designerBag.png"></image> -->
			<image src="https://img.zhizhuangtong.com/project_media/img/xcx/designerBag.png"></image>
		</view>

		<view class="conterRow">

			<!-- 案例信息 -->
			<view class="info">
				<view class="userdata">
					<view class="row">
						<view class="leftRow">
							<image :src="userInfo.user?.avatar" class="avatar"></image>
							<view class="userinfo">
								<text class="name">{{userInfo.user?.real_name}}</text>
								<text class="registered" v-if="userInfo.user?.real == 1">已实名</text>
							</view>

						</view>

						<view class="rightRow">
							<view class="center">
								<!-- <view class="col1" @click="nullClick">咨询</view>
								<view class="col2" @click="nullClick">预约设计</view>
								<view class="col3" @click="tips">
									<image src="@/static/home/tips.png" class="avatar"></image>
								</view> -->
							</view>
						</view>

					</view>

					<text class="style">擅长风格：{{userInfo.design?.style_text}}</text>
					<view class="case">
						<view class="label">案例数量：
							<text class="number">{{userInfo.tab_num?.case_num}}</text>
						</view>
						<view class="label">服务区域：
							<text class="number">{{userInfo.design?.area_names}}</text>
						</view>
					</view>
				</view>

			</view>


			<!-- 案例列表 -->
			<view class="nullData" v-if="caselist.length == 0 && !isLoading">
				<image src="https://img.zhizhuangtong.com/project_media/img/xcx/null.png" mode=""></image>
				<text>暂无数据</text>
			</view>


			<view class="list" v-else>
				<text class="label">优秀作品</text>


				<view class="for" v-for="(item,index) in caselist" :key="item.id" @click="onDetails(item.id)">

					<up-lazy-load :image="item.img" class="coverimg" img-mode='widthFix'></up-lazy-load>
					<!-- <image :src="item.img" class="coverimg"></image> -->

					<text class="title">{{item.title}}</text>
					<view class="tags">
						<text class="tag" v-if="item.style_text_arr.length > 0" v-for="(ite,ind) in item.style_text_arr"
							:key="ind">{{ ite }}</text>

					</view>
				</view>
			</view>


			<view v-if="isLoading" class="load-more-box">
				<text>加载中...</text>
			</view>
			<view v-if="caselist.length !== 0 && !isLoading && !hasMoreData" class="load-more-box">
				<text>已经到底了</text>
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		designInfo,
		designInfoList
	} from '@/api/designerList.js';
	import {
		ref,
		onMounted,
		defineExpose,
		watch
	} from 'vue';
	import {
		onLoad,
		onHide,
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app'

	const detailsObj = ref({})
	const casedetail = ref({})
	const hasMoreData = ref(true); // 初始化为true，表示还有更多数据
	const isLoading = ref(false); // 加载状态
	const params = ref({
		id: '',
		// recommend: '',
		order: 0,
		page: 1,
		page_size: 2
	})
	const userInfo = ref({}) //用户信息
	const caselist = ref([]) //案例列表
	const ids = ref('') //详情id
	
	onLoad((option) => {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})
		if (option.id) {
			ids.value = option.id;
			console.log('idsidsidsids',ids)
		}
	})
	//发送给朋友
	onShareAppMessage((res) => {
		if (userInfo.value) {
			const url = '/pages/designer/designerDetails/index?share=1&id=' + ids.value;
			return {
				title: userInfo.value?.user?.real_name,
				type: 0,
				path: url,
			}
		}
	})

	//分享到朋友圈
	onShareTimeline((res) => {
		if (userInfo.value) {
			const url = '/pages/designer/designerDetails/index?share=1';
			return {
				title: userInfo.value?.user?.real_name,
				type: 0,
				path: url,
				query: {
					id: ids.value
				},
			}
		}
	})

	onHide(() => {
		uni.setStorageSync('isShare', '1');
	})
	onMounted(() => {
		queryDetailsInfo(ids.value)
		queryDetailsList(ids.value)
	});

	onReachBottom(() => {
		queryDetailsList(ids.value)
	});
	// 设计师信息详情
	const queryDetailsInfo = async (id) => {
		console.log('设计师信息详情',id)
		const res = await designInfo({
			id: id
		});
		if (res.code === 1) {
			console.log(res.data)
			userInfo.value = res.data
			// detailsObj.value = res.data
			// casedetail.value = res.data.case
			// case_list.value = res.data.case_list;
		}

	}
	const nullClick = () => {
		// wx.showToast({
		// 	title: '正在开发中！',
		// 	icon: 'none',
		// 	duration: 2000
		// });
	}

	const tips = () => {
		wx.showToast({
			title: '预约设计需要付费，预约后设计师将上门现场设计！',
			icon: 'none',
			duration: 2000
		});
	}


	// 设计师 案例列表
	const queryDetailsList = async (id) => {
		params.value.id = id

		isLoading.value = true; // 设置加载中
		try {
			const res = await designInfoList(params.value);
			if (res.code === 1) {
				if (params.value.page === 1) {
					caselist.value = res.data.list;
				} else {
					caselist.value.push(...res.data.list);
				}
				// 判断是否还有更多数据
				if (res.data.list.length < params.value.page_size) {
					hasMoreData.value = false; // 没有更多数据
				} else {
					hasMoreData.value = true; // 还有更多数据
				}


				caselist.value.forEach((item) => {
					if (item.style_type_text != "") {
						item.style_text_arr = item.style_type_text.split(",");
						// console.log('========', item.style_text_arr)
						// if (item.style_text_arr.length > 4) {
						// 	item.style_text_arr = item.style_type_text.slice(0, 4);
						// 	item.style_text_arr.push("...");
						// }
					} else {
						item.style_text_arr = [];
					}
				});
				params.value.page += 1; // 页码递增
			}
			setTimeout(() => {
				isLoading.value = false;
			}, 500);
		} catch (error) {
			console.error('请求数据失败:', error);
		} finally {
			isLoading.value = false; // 加载完成

		}
	}


	// 去详情
	const onDetails = (id) => {
		uni.navigateTo({
			url: '/pages/find/findCaseDetails/index?id=' + id
		});
	}
</script>

<style scoped lang="less">
	.findCaseDetails {
		width: 100%;
		position: relative;

		.cover {
			height: 390rpx;
			width: 100%;
			position: relative;
			z-index: -1;

			image {
				height: 100%;
				width: 100%;
			}
		}

		// 设计师信息
		.conterRow {
			margin-top: -70rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #CCA05F;
			min-height: calc(100vh - 400rpx);
			box-sizing: border-box;
			background-color: #FFFFFF;



			.info {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				box-sizing: border-box;


				.userdata {
					padding: 0 40rpx 0;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					margin-top: -70rpx;
					padding-bottom: 40rpx;
					border-bottom: 1px solid #E9E9E9;

					.row {
						width: 100%;
						display: flex;

						.leftRow {
							width: 40%;

							.avatar {
								width: 120rpx;
								height: 120rpx;
								background: #F8E3CF;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								border: 3rpx solid #FFFFFF;
								overflow: hidden;
								border-radius: 50%;
								margin-bottom: 20rpx;
							}

							.userinfo {
								display: flex;
								justify-content: flex-start;
								align-items: center;
								width: 100%;


								.name {
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 34rpx;
									color: #000000;
									line-height: 34rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									max-width: 200rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.registered {
									min-width: 66rpx;
									width: 66rpx;
									height: 30rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 400;
									font-size: 22rpx;
									color: #12C241;
									line-height: 30rpx;
									text-align: center;
									font-style: normal;
									text-transform: none;
									background: #FFFFFF;
									border-radius: 4rpx;
									margin-left: 15rpx;
									border: 1rpx solid #12C241;
								}
							}

						}

						.rightRow {
							width: 60%;
							display: flex;

							align-items: flex-end;
							padding-bottom: 25rpx;

							.center {
								height: 65rpx;
								width: 100%;
								display: flex;
								justify-content: flex-end;
								align-items: center;

								.col1 {
									width: 135rpx;
									height: 65rpx;
									background: #F7EEE1;
									border-radius: 45rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 26rpx;
									color: #D5A969;
									line-height: 65rpx;
									text-align: center;
									font-style: normal;
									text-transform: none;
								}

								.col2 {
									width: 175rpx;
									height: 65rpx;
									margin: 0 10rpx;
									background: linear-gradient(113deg, #F2BD6F 0%, #CCA05F 100%);
									border-radius: 45rpx;
									font-family: Source Han Sans CN, Source Han Sans CN;
									font-weight: 500;
									font-size: 26rpx;
									color: #FFFFFF;
									line-height: 65rpx;
									text-align: center;
									font-style: normal;
									text-transform: none;
								}

								.col3 {
									width: 40rpx;
									height: 40rpx;
								}
							}

						}

					}

					.style {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 30rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin: 20rpx 0;
						width: 100%;
					}

					.case {
						width: 100%;
						display: flex;
						align-items: center;

						.label {
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #333333;
							line-height: 30rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-right: 20rpx;

							.number {
								font-family: Source Han Sans CN, Source Han Sans CN;
								font-weight: 500;
								font-size: 24rpx;
								color: #333333;
								line-height: 30rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}

					}

				}



				.desc {
					padding: 35rpx 0;
					border-top: 1rpx solid #E4E4E4;
					border-bottom: 1rpx solid #E4E4E4;
					box-sizing: border-box;
					width: 100%;
					display: flex;
					flex-wrap: wrap;

					.label {
						width: 100%;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 30rpx;
						color: #000000;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-bottom: 15rpx;
					}
				}

			}

			.list {
				height: 100%;
				width: 100%;
				padding: 40rpx 30rpx 0;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;

				.label {
					display: block;
					width: 100%;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
					line-height: 30rpx;
					font-style: normal;
					text-transform: none;
					margin-bottom: 20rpx;
				}

				.for {
					width: 100%;
					float: left;
					// display: flex;
					// flex-wrap: wrap;
					margin-bottom: 40rpx;

					.coverimg {
						width: 100%;
						// display: flex;
						// height: 200rpx;

						image {
							height: 100%;
							width: 100%;
						}
					}


					&:last-child {
						margin-bottom: 0;
					}

					.title {
						display: block;
						width: 100%;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						line-height: 34rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin: 20rpx 0 12rpx;
					}

					.tags {
						// display: flex;
						width: 100%;
						// padding-bottom: 40rpx;
						box-sizing: border-box;
						float: left;

						.tag {
							float: left;
							margin-bottom: 20rpx;
							// height: 40rpx;
							min-width: 60rpx;
							height: 40rpx;
							padding: 0 10rpx;
							background: #FFFFFF;
							border-radius: 4rpx;
							border: 1rpx solid #EAC285;
							font-family: Source Han Sans CN, Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #D5A969;
							margin-left: 12rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							box-sizing: border-box;

							&:first-child {
								margin-left: 0;
							}
						}
					}
				}
			}
		}

		.load-more-box {
			text-align: center;
			width: 100%;
			padding-top: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			color: #7A7A7A;
		}
	}
</style>